<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title></title>
        <script src="lib/js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/js/vue-router.js" type="text/javascript"></script>
</head>

<style>
    .header{
        background-color: pink;
        height: 90px;
    }

    body{
        margin:0;
        padding: 0;
    }
    h1{
        margin:0;
        padding: 0;
    }
    .container{
        display: flex;
    }
    .aside{
        background-color: #4cae4c;
        flex: 2;
        height: 600px;
    }
    .content{
        background-color: #00ee00;
        flex: 8;
    }

</style>

<body>
<div id="app">

    <router-view></router-view>
   <div class="container">
       <router-view name="aside"></router-view>
       <router-view name="content"></router-view>
   </div>



</div>
<script>
    var header = {
        template:'<h1 class="header">Header头部区域</h1>'
    }

    var aside  = {
        template:'<h1 class="aside">侧边栏</h1>'
    }

    var content = {
        template:'<h1 class="content">主体</h1>'
    }

    var router = new VueRouter({
        routes:[
            {
                path:'/',
                components: {
                    default:header,
                    aside:aside,
                    content:content
                }
            },
//            {path:'/left',component:aside},
//            {path:'/content',component:content},
        ]
    })

    // 创建一个vue实例
    new Vue({
        el:'#app',
        data:{
            msg:'信息'
        },
        methods:{

        },
        router : router
    })
</script>
</body>
</html>
